<template>
  <div class="details">
    <template v-if="this.$route.path == '/content/details'">
      <el-card shadow="never">
        <div class="container download">
          <div class="row downloadsEa">
            <div class="col col-xxl-10 col-xl-9 col-lg-8 col-md-12">
              <div class="details_">
                <img :src="passData.img" class="details_img">
                <div class="details_list">
                  <h1>{{ passData.name }} </h1>
                  <p class="p1">{{ passData.subject || '--' }} &nbsp;{{ passData.clas || '--' }}</p>
                  <p class="p1" v-if="passData.status == 1 ">已上架</p>
                  <p class="p1" v-if="passData.status == 2 ">已下架</p>
                  <p class="p1" v-if="passData.status == 3 ">未上架</p>
                  <div class="creation">创建时间：{{ passData.createDate }} &nbsp;&nbsp;&nbsp;大小：{{ passData.capacity || 0 }}M</div>
                </div>
              </div>
            </div>
            <div class="col col-xxl-2 col-xl-3 col-lg-4 col-md-12">
              <div class="btn_right">
                <el-button @click="operation('editor')">编辑</el-button>
                <el-button @click="operation('shelves')" v-if="passData.status == 1" class="xiaJia">下架</el-button>
                <el-button @click="operation('shelvesOn')" v-else-if="passData.status == 2 || 3" class="topJia">上架</el-button>
                <el-button @click="operation('delete')" :disabled="passData.status == 1" class="delete">删除</el-button>
                <!-- <el-button @click="clickBack">返回</el-button> -->
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <div class="learn_details">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学习情况" name="1">
            <learn-details :ningData="ningData"></learn-details>
          </el-tab-pane>
          <el-tab-pane label="安装设备" name="2" class="second">
            <installation :mentData="mentData" @deleteRow="deleteRow"></installation>
          </el-tab-pane>
        </el-tabs>
        <paging
          v-if="activeName == '1' && ningData.length > 0"
          :currentPage3="currentPage"
          :total="totalOne"
          :pageSize="pageSizeOne"
          @handleSizeChange="handleSizeChangeOne"
          @handleCurrentChange="handleCurrentChangeOne">
        </paging>
        <paging
          v-if="activeName == '2' && mentData.length > 0"
          :currentPage3="currentPage3"
          :total="total"
          :pageSize="pageSize"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        </paging>
      </div>
    </template>

    <transition name="transitionName">
			<router-view clss="index-main" />
    </transition>

  </div>
</template>

<script>
import learnDetails from '../../components/content/learnDetails.vue';
import installation from '../../components/content/installation.vue';
import paging from '../../components/content/paging.vue';
import { timestampToTimeShi } from '../../utils/util';
export default {
  components: { learnDetails, installation, paging },
  data() {
    return {
      activeName: '1',
      ningData: [],   // 学习情况数据
      mentData: [],   // 安装设备数据
      currentPage: 1,
			currentPage3: 1,
			total: 0,
      totalOne: 0,
			pageSize: 0,
      pageSizeOne: 0,
      passData: {},   // 详情传递过来的数据
    }
  },
	watch:{
		// $route:{
  //     handler: function(val, oldVal) {
  //       this.emptyDate();  // 返回页面后自动刷新
  //     },
  //     // 深度观察监听
  //     deep:  true
		// }
	},
  mounted() {
    var _this = this;
    _this.passData = JSON.parse(sessionStorage.getItem('userData'));
    // console.log(JSON.parse(sessionStorage.getItem('userData')))
    _this.emptyDate();  // 学习情况数据
  },
  methods: {
    // 获取详情页学习情况
    emptyDate(){
      this.$http.content.detailsList({id: JSON.parse(sessionStorage.getItem('userData')).id,xueid: 1}).then( res => {
        this.ningData = res.data;
        this.totalOne = res.total;
        this.pageSizeOne = res.size;
        this.gongGongStudent();
      })
    },
    // 更改公共的累计学习时长h
    gongGongStudent(time){
      this.ningData.filter( item => {
        item.zhang = timestampToTimeShi(item.zhang);
        item.pinshi = timestampToTimeShi(item.pinshi);
      })
    },
    // 课件详情右上角编辑/上架/下架/删除按钮
    operation(states) {
      if(states === 'editor'){   //跳转页面
        this.$http.content.findBYidEcho({id: JSON.parse(sessionStorage.getItem('userData')).id}).then( res => {
          // console.log(res)  // 点编辑过去后存下status的状态以便修改 的时候数据丢失
          if(res.code == 200) {
            if(res.data.status == 1) { sessionStorage.setItem('statusChange','立即上架') } 
            else if(res.data.status == 3){ sessionStorage.setItem('statusChange','暂不上架') } 
            else { sessionStorage.setItem('statusChange','下架') }
            sessionStorage.setItem('curriculm',JSON.stringify(res.data));
            this.$router.push({ name: 'curriculum' , params: res.data })
          }
        })
      } else if(states == 'shelves') {
        this.$confirm('下架此商品, 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.content.upAndDown({id: this.passData.id,status: 1}).then( res => {
            this.passData.status = 2;
            this.$message({
              type: 'success',
              message: '已成功下架该资源!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      } else if(states == 'shelvesOn') {
        this.$confirm('上架此商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.content.upAndDown({ id: this.passData.id, status: 2}).then( res => {
            this.passData.status = 1;
            this.$message({
              type: 'success',
              message: '已成功上架该资源!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          });
        });
      } else {  //删除操作
        this.$http.content.deleteList({id: this.passData.id}).then( res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          setTimeout( () =>{
            this.$router.push({path: '/content'})
          },300)
        })
      }
    },
    // 学习情况/安装设备 切换按钮
    handleClick(tab, event) {
      if(tab.index == '1') { this.lisFunctionGong(); }
    },
    // 安装设备 表格的卸载按钮
    deleteRow(index, rows) {
      // console.log(index, rows)
      this.$confirm('此操作将永久卸载该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.content.uninstallList({ cid: JSON.parse(sessionStorage.getItem('userData')).id, eid: rows.id }).then( res => {
          this.lisFunctionGong();
          this.$message({
            type: 'success',
            message: '卸载成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消卸载'
        });
      });
    },
    // 公共的安装设备接口请求
    lisFunctionGong(){
      const newActiveName = parseInt(this.activeName);
      this.$http.content.detailsList({ id: JSON.parse(sessionStorage.getItem('userData')).id, xueid: newActiveName }).then(res => {
        this.mentData = res.data;
        this.pageSize = res.size;
        this.total = res.total;
      })
    },
    // 两个分页的操作
		handleSizeChange(val) { this.pageSize = val; },
		handleCurrentChange(val) { this.currentPage3 = val; },
    handleSizeChangeOne(val) { this.pageSizeOne = val; },
    handleCurrentChangeOne(val){ this.currentPage = val; },
    //// 后退 clickBack() { this.$router.push({path: '/content'});sessionStorage.removeItem('userData') }
  }
}
</script>

<style scoped>
@import '../../assets/css/content/details.scss';
</style>
